<template>
    <div>
        <div class="info-form">
            <el-button type="primary" @click="getLessons2()">增加课程</el-button>
            <el-dialog title="增加课程" :visible.sync="dialogTableVisible">
                <el-table
                        ref="multipleTable"
                        :data="stuData"
                        border
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="lname"
                            label="课程">
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px">
                    <el-button @click="toggleSelection()">取消选择</el-button>
                    <el-button type="primary" @click="setLessons()">提交</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="lname"
                        label="已选课程">
                </el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button @click="handleClick(scope.$index)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    export default {
        data() {
            return {
                options: [],
                value: '',
                addForm: {
                    switch: false
                },
                tableData: [],
                tableId: [],
                dialogTableVisible: false,
                stuData: [],
                multipleSelection: []
            }
        },
        activated(){
            this.tableId = [];
            let user = JSON.parse(localStorage.getItem("currentUser"));
            if (user.account == "system") {
                this.addForm.switch = true;
            }
            this.getLessons();

        },
        methods: {
            setLessons(){
                let self = this;
                let lids = [];
                this.multipleSelection.forEach(item => {
                    lids.push(item.id)
                })
                this.$axioxs.post("/lessons/choice?lids=" + lids)
                    .then(function (res) {
                        self.getLessons();
                        self.dialogTableVisible = false;
                    })
            },
            getLessons(){
                let self = this;
                this.tableData = [];
                this.$axioxs.get("/lessons/getLessons")
                    .then(function (res) {
                        self.tableData = res.data.records;
                        console.log(self.tableData)
                        self.tableData.forEach(item => {
                            self.tableId.push(item.id);
                        })
                    })
            },
            getLessons2(){
                let self = this;
                this.stuData = [];
                this.dialogTableVisible = true;
                this.$axioxs.get("/lessons/get")
                    .then(function (res) {
                        var arr = res.data.records;
                        arr.forEach(item => {
                            if (self.tableId.indexOf(item.id) == -1) {
                                self.stuData.push(item)
                            }
                        })
                    })
            },
            handleClick(index) {

            },
            deleteRow(index, rows) {

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
        }
    }
</script>